<template>
  <div>
    <el-card class="box-card" label-width>
      <!-- 头部 -->
      <el-row type="flex" justify="end">
        <el-col :span="12"><div class="grid-content bg-purple" />
          <el-button type="primary" @click="isShowDialog = true">添加页面</el-button>
        </el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light" />
          <el-input v-model="input2" placeholder="请输入内容" @change="setData()">
            <template slot="append"><el-button @click="btnFilter">筛选</el-button></template>
          </el-input></el-col>
      </el-row>
      <div>
        <hr>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          fixed
          width="180"
          prop="title"
          label="标题"
        />
        <el-table-column
          prop="content"
          label="内容"
        >
          <template v-slot="{row}">
            <span v-html="row.content">{{ row.content }}</span>
          </template>
        </el-table-column>
        <!-- 渲染组件 -->
        <slot />
        <el-table-column
          prop="address"
          label="操作"
        >
          <template #default="{row}">
            <el-button
              size="mini"
              type="primary"
              @click="pageEdit(row.id)"
            >编辑</el-button>
            <slot />
            <el-button
              size="mini"
              type="danger"
              @click="delDate(row.id)"
            >删除</el-button>

          </template>
        </el-table-column>
      </el-table>
      <div>
        <hr>
      </div>
      <!-- 分页 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pages._limit"
          @current-change="changeBtn"
        />
      </el-row>
    </el-card>
    <!-- 编辑页面 -->
    <el-dialog :visible="isShowDialog" @close="btnCancel">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <vue-editor
            v-model="form.content"
            @blur="contentRule"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="btnCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { VueEditor } from 'vue2-editor'
import { delDate, getPage, pageAmout, pageEdit, getEdit, newPage } from '@/api/page'
import child from '@/components/PageTools'
export default {
  components: { VueEditor },
  data() {
    return {
      input2: '',
      total: 0,
      components: {
        child
      },
      isShowDialog: false,
      // 表单
      form: {
        content: '',
        title: ''
      },
      // 校验编辑页面
      rules: {
        title: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ]
      },
      tableData: [],
      pages: {
        _limit: 10, // 获取的最大条数
        _start: 0, // 开始获取的位置
        title_contains: '' // 模糊搜索标题
      }
    }
  },
  // 渲染列表
  async  created() {
    this.getPage()
    // this.res.total = await
    console.log(this.total)
    this.pageAmout()
  },
  methods: {
    setData() {
      // 输入框清完时，点击按钮，恢复页面
      if (this.input2 === '') {
        this.getPage()
      }
    },
    // 模糊搜索
    async btnFilter() {
      console.log(this.input2)
      this.pages.title_contains = this.input2
      this.getPage()
    },
    // 删除功能
    async delDate(id) {
      // 二次询问
      await this.$confirm('是否确认删除?')
      // 发请求
      await delDate(id)
      // 通知用户
      this.$message.success('删除成功')
      // 刷新数据
      this.changeBtn(1)
      this.pageAmout()
      this.getPage()
    },
    // 获取列表
    async getPage() {
      const res = await getPage(this.pages)
      this.tableData = res.data
      console.log(res)
    },
    // 分页
    async pageAmout() {
      // this.total = this.pageAmout()
      const { data } = await pageAmout()
      // console.log(data, 55555)

      this.total = data
      this.getPage()
    },
    // 页面总数
    changeBtn(newPage) {
      if (newPage === 1) {
        this.pages._start = '0'
      } else {
        this.pages._start = newPage * 10 - 10
      }
      this.getPage()
    },
    // 回显编辑页面
    async pageEdit(id) {
      // console.log(id)
      // 要解构
      const { data } = await getEdit(id)
      // console.log(res)
      this.form = data
      console.log(this.form)
      // this.form.data = await getEdit(id)
      // console.log(this.form)
      this.isShowDialog = true
    },
    async onSubmit() {
      // 校验表单
      await this.$refs.form.validate()
      // 发请求
      // 判断是编辑还是添加
      // 这里是以this.form.id判断
      if (this.form.id) {
      //   // 编辑
        await pageEdit(this.form)
      } else {
      //   // 新增
        await newPage(this.form)
      }
      // // 提醒用户
      this.$message.success('操作成功')
      // // 刷新数据
      this.getPage()
      this.pageAmout()
      // // 关闭弹窗
      this.isShowDialog = false
    },
    btnCancel() {
      this.form = {
        title: '',
        content: ''
      }
      //  清理校验
      this.$refs.form.resetFields()
      //  关闭弹窗
      this.isShowDialog = false
    },
    // 校验富文本
    contentRule() {
      this.$refs.form.validateField('content')
    }
  }
}
</script>

<style lang="less" scoped>
.PageNumber{
  text-align: center;
}

  .box-card {
    margin: 20px 15px;
  }
   .text {
    font-size: 14px;
  }

hr{
    margin-top: 30px;
    margin-bottom: 20px;
}

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
 .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
